<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生选课系统 - 注册</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
</head>

<!--*********************************注册页面*******************************-->


<body class="bg-gradient-to-br from-indigo-500 to-purple-600 min-h-screen flex items-center justify-center p-4">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -right-10 -top-10 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
        <div class="absolute left-1/2 top-1/3 w-96 h-96 bg-white/5 rounded-full blur-3xl"></div>
        <div class="absolute -left-20 bottom-10 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
    </div>

    <!-- 注册卡片 -->
    <div class="relative bg-white rounded-2xl shadow-2xl max-w-2xl w-full overflow-hidden animate-fade-in">
        <!-- 顶部装饰条 -->
        <div class="h-2 bg-gradient-to-r from-indigo-500 to-purple-600"></div>

        <!-- 卡片内容 -->
        <div class="p-8">
            <!-- 标题 -->
            <div class="text-center mb-8">
                <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-user-plus text-2xl text-indigo-600"></i>
                </div>
                <h1 class="text-2xl font-bold text-gray-800">学生选课系统</h1>
                <p class="text-gray-500 mt-2">创建新账号</p>
            </div>

            <!-- 注册表单 -->
            <form id="registerForm" class="space-y-5">
                <!-- 学号/工号 -->
                <div>
                    <label for="studentId" class="block text-sm font-medium text-gray-700 mb-1">学号/工号</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-id-card"></i>
                        </span>
                        <input type="text" id="studentId" name="studentId" class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all duration-200" placeholder="请输入学号或工号">
                    </div>
                </div>

                <!-- 姓名 -->
                <div>
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" id="name" name="name" class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all duration-200" placeholder="请输入姓名">
                    </div>
                </div>

                <!-- 性别 -->
                <div>
                    <label for="gender" class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-building"></i>
                        </span>
                        <select id="gender" name="gender" class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all duration-200 appearance-none">
                            <option value="">请选择性别</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                            <i class="fa fa-chevron-down text-gray-400"></i>
                        </div>
                    </div>
                </div>

                <!-- 学院/系 -->
                <div>
                    <label for="department" class="block text-sm font-medium text-gray-700 mb-1">学院/系</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-building"></i>
                        </span>
                        <select id="department" name="department" class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all duration-200 appearance-none">
                            <option value="">请选择学院/系</option>
                            <option value="计算机学院">计算机学院</option>
                            <option value="数学学院">数学学院</option>
                            <option value="物理学院">物理学院</option>
                            <option value="化学学院">化学学院</option>
                            <option value="生命科学学院">生命科学学院</option>
                            <option value="电子工程学院">电子工程学院</option>
                            <option value="机械工程学院">机械工程学院</option>
                            <option value="土木工程学院">土木工程学院</option>
                        </select>
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                            <i class="fa fa-chevron-down text-gray-400"></i>
                        </div>
                    </div>
                </div>

                <!-- 专业 -->
                <div>
                    <label for="major" class="block text-sm font-medium text-gray-700 mb-1">专业</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-book"></i>
                        </span>
                        <input type="text" id="major" name="major" class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all duration-200" placeholder="请输入专业">
                    </div>
                </div>

                <!-- 年级 -->
                <div>
                    <label for="grade" class="block text-sm font-medium text-gray-700 mb-1">年级</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-calendar"></i>
                        </span>
                        <select id="grade" name="grade" class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all duration-200 appearance-none">
                            <option value="">请选择年级</option>
                            <option value="大一">大一</option>
                            <option value="大二">大二</option>
                            <option value="大三">大三</option>
                            <option value="大四">大四</option>
                            <option value="研一">研一</option>
                            <option value="研二">研二</option>
                            <option value="研三">研三</option>
                            <option value="博士">博士</option>
                        </select>
                        <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
                            <i class="fa fa-chevron-down text-gray-400"></i>
                        </div>
                    </div>
                </div>

                <!-- 手机号码 -->
                <div>
                    <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">手机号码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-phone"></i>
                        </span>
                        <input type="tel" id="phone" name="phone" class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all duration-200" placeholder="请输入手机号码">
                    </div>
                </div>

                <!-- 密码 -->
                <div>
                    <label for="registerPassword" class="block text-sm font-medium text-gray-700 mb-1">设置密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="registerPassword" name="password" class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all duration-200" placeholder="请设置密码">
                        <button type="button" id="toggleRegisterPassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors duration-200">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">密码长度至少8位，包含字母、数字和特殊字符</p>
                </div>

                <!-- 确认密码 -->
                <div>
                    <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-1">确认密码</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="confirmPassword" name="confirmPassword" class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 transition-all duration-200" placeholder="请再次输入密码">
                        <button type="button" id="toggleConfirmPassword" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600 transition-colors duration-200">
                            <i class="fa fa-eye"></i>
                        </button>
                    </div>
                </div>


<!--                &lt;!&ndash; 已有账号链接 &ndash;&gt;-->
<!--                <div class="mt-4 text-center">-->
<!--                    <p class="text-gray-600">-->
<!--                        已有账号? <a href="login.html" class="text-indigo-600 hover:text-indigo-700 font-medium transition-colors duration-200">立即登录</a>-->
<!--                    </p>-->
<!--                </div>-->
            </form>
        </div>
        <!-- 注册按钮 -->

        <button id="registerButton" onclick="registerButtons()" class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 ext-white py-3 px-4 rounded-lg font-medium shadow-lg shadow-indigo-500/30 hover:shadow-xl hover:shadow-indigo-500/30 transform hover:-translate-y-0.5 transition-all duration-200">
            注册账号
        </button>

        <!-- 已有账号链接 -->
        <div class="mt-4 text-center">
            <p class="text-gray-600">
                已有账号? <a href="login.html" class="text-indigo-600 hover:text-indigo-700 font-medium transition-colors duration-200">立即登录</a>
            </p>
        </div>
    </div>
    <!-- 页脚 -->
    <div class="absolute bottom-4 text-center text-white/70 text-sm">
    </div>
    <script src="../js/register.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
    